<template>
  <el-dialog v-model="visible" title="新增标签条" width="68vw">
    <el-form ref="formRef" :model="form" label-width="0">
      <el-table :data="form.labels" stripe border>
        <el-table-column prop="date" label="经销商" min-width="200px">
          <template v-slot:default="{ row, $index }">
            <el-form-item :prop="`labels.${$index}.dealerCode`" required>
              <select-comp
                url="/admin-api/system/dealer/list-all"
                v-model="row.dealerCode"
                filterable
                :defaultConf="{ label: 'dealerName', value: 'dealerCode' }"
                @onSelect="(ele) => onChangeDealer(ele, row)"
              ></select-comp>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="品种" min-width="200px">
          <template v-slot:default="{ row, $index }">
            <el-form-item :prop="`labels.${$index}.breedId`" required>
              <select-comp
                url="/admin-api/system/breed/list-all"
                v-model="row.breedId"
                filterable
                :defaultConf="{ label: 'breedName', value: 'breedId' }"
                @onSelect="(ele) => onChangeBreed(ele, row)"
              ></select-comp>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="名称" width="200">
          <template v-slot:default="{ row, $index }">
            <el-form-item :prop="`labels.${$index}.labelName`" required>
              <el-input
                v-model.trim="row.labelName"
                placeholder="请输入标签条名称"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="积分" align="center" width="200">
          <el-table-column prop="custPoints" label="客户" width="150" />
          <el-table-column prop="salemanPoints" label="业务员" width="150">
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="actions"
          label="操作"
          width="80"
          v-slot:default="{ $index }"
        >
          <el-button type="danger" size="small" text @click="onDelete($index)">
            删除
          </el-button>
        </el-table-column>
      </el-table>
    </el-form>
    <el-button
      type="primary"
      style="width: 100%; margin-top: 10px"
      @click="onAddTableList"
    >
      新增一行
    </el-button>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm"> 确定 </el-button>
        <el-button @click="onCancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, defineEmits, defineProps } from "vue";
import { ElMessage } from "element-plus";
import api from "@/api/label.js";
import SelectComp from "@/components/selectComp.vue";

const props = defineProps({
  typeName: { type: String, default: "新增" },
});
const visible = ref(false);
const formRef = ref();
const emits = defineEmits(["success", "error"]);
const form = ref({
  labels: [
    {
      breedId: "",
      labelName: "",
      dealerName: "",
      dealerCode: "",
      custPoints: "",
      salemanPoints: "",
    },
  ],
});

const onAddTableList = () => {
  form.value.labels.push({
    breedId: "",
    labelName: "",
    dealerName: "",
    dealerCode: "",
    custPoints: "",
    salemanPoints: "",
  });
};

const onChangeDealer = (ele, row) => {
  row.dealerName = ele.dealerName;
};
const onChangeBreed = (ele, row) => {
  row.custPoints = ele.custPoints;
  row.breedName = ele.breedName;
  row.labelName = ele.breedName;
  row.salemanPoints = ele.salemanPoints;
};

const submitForm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      const res = await api.create(form.value);
      if (res.data) {
        ElMessage.success(res.msg || `保存成功！`);
        onCancel();
        emits("success");
      } else {
        ElMessage.error(res.msg || `保存失败！`);
        emits("error");
      }
    }
  });
};
const onDelete = (index) => {
  form.value.labels.splice(index, 1);
};
const onCancel = () => {
  formRef.value.clearValidate();
  visible.value = false;
};
const openDialog = (row) => {
  visible.value = true;
};

defineExpose({
  openDialog,
});
</script>
<style lang="scss" scoped>
:deep(.el-form-item) {
  margin-bottom: 0;
}
</style>
